<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElScrollbar } from 'element-plus'
import * as echarts from 'echarts'

// 项目板块数据
const projectData = ref({
  totalProjects: 50,
  inProgressProjects: 46,
  completedProjects: 4,
  projectList: [
    {
      name: '义乌综合交通枢纽项目1-72标段项目',
      planProgress: 3,
      actualProgress: 3,
    },
    { name: '收费站第一期', planProgress: 2, actualProgress: 1 },
    { name: '西湖油托管', planProgress: 3, actualProgress: 0 },
    { name: '03综合交通枢纽工程二期', planProgress: 2, actualProgress: 2 },
    {
      name: '义乌综合交通枢纽项目1-72标段项目',
      planProgress: 3,
      actualProgress: 3,
    },
  ],
})

// 物业板块数据
const propertyData = ref({
  buildings: 12,
  residents: 145,
  totalArea: 32576,
  trendData: {
    months: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
    ],
    line1: [400, 100, 200, 100, 100, 600, 900, 600, 100, 500, 800, 100],
    line2: [100, 400, 300, 200, 400, 600, 300, 800, 500, 900, 400, 100],
  },
})

// 监管板块数据
const supervisionData = ref([
  { name: '综合交通枢纽工程二期', type: '投资预警', status: '一级预警' },
  { name: '义乌综合交通枢纽项目上部工程', type: '隐患风险', status: '未预警' },
  { name: '义乌综合交通枢纽项目', type: '投资预警', status: '未预警' },
  { name: '义乌综合交通枢纽项目二期', type: '隐患风险', status: '一级预警' },
  { name: '综合交通枢纽工程二期', type: '投资预警', status: '一级预警' },
])

// 投资板块数据
const investmentData = ref({
  years: ['2020', '2021', '2022', '2023'],
  values: [15, 25, 18, 22],
  rates: [0, 45, 20, 35],
})

// 更新人事板块数据
const personnelData = ref({
  total: 308,
  management: 8,
  regular: 120,
  distribution: [
    { name: '管理层', value: 80, itemStyle: { color: '#B4E4FF' } },
    { name: '中层', value: 120, itemStyle: { color: '#409EFF' } },
    { name: '基层', value: 60, itemStyle: { color: '#FFD93D' } },
    { name: '其他', value: 48, itemStyle: { color: '#FF9B9B' } },
  ],
})

const scrollPosition = ref(0)
let scrollTimer = null

// 添加项目列表的滚动位置控制
const projectScrollPosition = ref(0)
let projectScrollTimer = null

// 公路板块数据
const roadData = ref({
  total: 60,
  items: [
    { name: '未受理', value: 11, color: '#FF4D4F' },
    { name: '已结案', value: 9, color: '#52C41A' },
    { name: '病害总数', value: 19, color: '#1890FF' },
    { name: '处理中', value: 2, color: '#FAAD14' },
  ],
})

const currentTime = ref('')

function updateTime() {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
  const weekday = weekdays[now.getDay()]
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')

  currentTime.value = `${year}-${month}-${day} 周${weekday} ${hours}:${minutes}:${seconds}`
}

let timer = null

// 初始化图表
onMounted(() => {
  updateTime() // 初始化时间
  timer = window.setInterval(updateTime, 1000) // 每秒更新一次

  // 投资趋势图
  const investmentChart = echarts.init(
    document.getElementById('investmentChart')
  )
  investmentChart.setOption({
    grid: {
      top: '15%',
      left: '5%',
      right: '5%',
      bottom: '8%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      data: investmentData.value.years,
      axisLine: {
        lineStyle: { color: 'rgba(255, 255, 255, 0.3)' },
      },
      axisLabel: {
        color: '#fff',
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '投资完成情况',
        min: 0,
        max: 30,
        interval: 10,
        axisLabel: {
          formatter: '{value} 亿元',
          color: '#fff',
        },
        nameTextStyle: {
          color: '#409EFF',
          padding: [0, 0, 0, -50],
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
          },
        },
        axisLine: {
          lineStyle: { color: 'rgba(255, 255, 255, 0.3)' },
        },
      },
      {
        type: 'value',
        name: '投资增长',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value} %',
          color: '#fff',
        },
        nameTextStyle: {
          color: '#409EFF',
          padding: [0, -50, 0, 0],
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: { color: 'rgba(255, 255, 255, 0.3)' },
        },
      },
    ],
    series: [
      {
        name: '投资金额',
        type: 'bar',
        barWidth: '40%',
        data: investmentData.value.values,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' },
          ]),
        },
      },
      {
        name: '增长率',
        type: 'line',
        yAxisIndex: 1,
        data: investmentData.value.rates,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#ffd700',
          width: 2,
        },
        itemStyle: {
          color: '#ffd700',
        },
      },
    ],
  })

  // 初始化人事分布饼图
  const personnelChart = echarts.init(document.getElementById('personnelChart'))
  personnelChart.setOption({
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: 'middle',
      itemWidth: 10,
      itemHeight: 10,
      icon: 'rect',
      formatter: function (name) {
        const item = personnelData.value.distribution.find(
          (i) => i.name === name
        )
        return `${name}`
      },
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#001529',
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: personnelData.value.distribution,
      },
    ],
  })

  // 初始化物业趋势图
  const propertyChart = echarts.init(document.getElementById('propertyChart'))
  propertyChart.setOption({
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      data: ['欧洲风情街', '其它小区1'],
      right: 10,
      top: 0,
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: {
      type: 'category',
      data: propertyData.value.trendData.months,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)',
        },
      },
      axisLabel: {
        color: '#fff',
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)',
        },
      },
      axisLabel: {
        color: '#fff',
      },
    },
    series: [
      {
        name: '欧洲风情街',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        data: propertyData.value.trendData.line1,
        itemStyle: {
          color: '#409EFF',
        },
        lineStyle: {
          width: 2,
        },
      },
      {
        name: '其它小区1',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        data: propertyData.value.trendData.line2,
        itemStyle: {
          color: '#67C23A',
        },
        lineStyle: {
          width: 2,
        },
      },
    ],
  })

  // 重新配置公路板块图表
  const roadChart = echarts.init(document.getElementById('roadChart'))
  roadChart.setOption({
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: 'middle',
      itemWidth: 10,
      itemHeight: 10,
      icon: 'rect',
      formatter: function (name) {
        const item = roadData.value.items.find((i) => i.name === name)
        return `${name} ${item?.value} (件)`
      },
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#001529',
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: roadData.value.items.map(function (item) {
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              color: item.color,
            },
          }
        }),
      },
    ],
  })

  // 修改图例创建方式
  const legendContainer = document.createElement('div')
  legendContainer.className = 'road-legend'
  const legendHTML = roadData.value.items
    .map(function (item) {
      return `
      <div class="legend-item">
        <span class="legend-dot" style="background-color: ${item.color}"></span>
        <span class="legend-text"></span>
        <span class="legend-value"></span>
      </div>
    `
    })
    .join('')
  legendContainer.innerHTML = legendHTML
  document.getElementById('roadPanel')?.appendChild(legendContainer)
  // 添加窗口大小改变时的自适应
  window.addEventListener('resize', function () {
    propertyChart.resize()
    roadChart.resize()
    personnelChart.resize()
  })

  startProjectScroll()
  startScroll()
})

function startProjectScroll() {
  const scrollSpeed = 0.5 // 降低滚动速度
  const resetPosition = -300 // 调整重置位置

  projectScrollTimer = window.setInterval(function () {
    projectScrollPosition.value -= scrollSpeed
    if (projectScrollPosition.value < resetPosition) {
      projectScrollPosition.value = 0
    }
  }, 50)
}

function stopProjectScroll() {
  if (projectScrollTimer) {
    clearInterval(projectScrollTimer)
    projectScrollTimer = null
  }
}

function startScroll() {
  const scrollSpeed = 1 // 控制滚动速度
  const resetPosition = -500 // 根据实际内容高度调整

  scrollTimer = window.setInterval(function () {
    scrollPosition.value -= scrollSpeed
    if (scrollPosition.value < resetPosition) {
      scrollPosition.value = 0
    }
  }, 50)
}

function stopScroll() {
  if (scrollTimer) {
    clearInterval(scrollTimer)
    scrollTimer = null
  }
}

onUnmounted(() => {
  stopProjectScroll()
  stopScroll()
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>

<template>
  <div class="dashboard">
    <!-- 顶部标题 -->
    <div class="header">
      <div class="left-header">
        <span class="back-btn">返回</span>
        <span class="weather-info">天气 晴天 17～28℃</span>
      </div>
      <div class="center-header">
        <div class="title-bg">义乌交旅综合数字驾驶舱</div>
      </div>
      <div class="right-header">
        <span>时间: {{ currentTime }}</span>
        <el-button type="primary" size="small">进入</el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧区域 -->
      <div class="left-area">
        <!-- 项目板块 -->
        <div class="panel project-panel">
          <div class="panel-header">
            <div class="title-box">
              <span class="title">项目板块</span>
            </div>
          </div>
          <div class="panel-content">
            <div class="statistics">
              <div class="stat-item">
                <div class="number">{{ projectData.totalProjects }}</div>
                <div class="label">项目总数</div>
              </div>
              <div class="stat-item">
                <div class="number">{{ projectData.inProgressProjects }}</div>
                <div class="label">需实施项目数</div>
              </div>
              <div class="stat-item">
                <div class="number">{{ projectData.completedProjects }}</div>
                <div class="label">有需实施项目数</div>
              </div>
            </div>
            <div class="project-content">
              <div class="table-header">
                <span>项目名称</span>
                <span>预审数量</span>
                <span>已处理数量</span>
              </div>
              <div class="project-scroll">
                <div
                  class="project-list"
                  :style="{
                    transform: `translateY(${projectScrollPosition}px)`,
                  }"
                >
                  <div
                    v-for="(project, index) in [
                      ...projectData.projectList,
                      ...projectData.projectList,
                    ]"
                    :key="index"
                    class="table-row"
                  >
                    <span class="project-name">{{ project.name }}</span>
                    <span class="progress-number">{{
                      project.planProgress
                    }}</span>
                    <span class="progress-number">{{
                      project.actualProgress
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 物业板块 -->
        <div class="panel property-panel">
          <div class="panel-header">
            <div class="title-box">
              <span class="title">物业板块</span>
            </div>
          </div>
          <div class="panel-content">
            <div class="statistics">
              <div class="stat-item">
                <div class="number">{{ propertyData.buildings }}</div>
                <div class="label">楼宇总数(栋)</div>
              </div>
              <div class="stat-item">
                <div class="number">{{ propertyData.residents }}</div>
                <div class="label">入住率</div>
              </div>
              <div class="stat-item">
                <div class="number">{{ propertyData.totalArea }}</div>
                <div class="label">面积(㎡)</div>
              </div>
            </div>
            <div class="trend-section">
              <div class="trend-title">迁舍问题情况</div>
              <div id="propertyChart" class="trend-chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间区域 -->
      <div class="center-area">
        <div class="platform-layout">
          <!-- 左侧按钮组 -->
          <div class="button-group left-group">
            <el-button type="primary" class="glow-button">
              <i class="el-icon-monitor"></i>
              能源管理平台
            </el-button>
            <el-button type="primary" class="glow-button">
              <i class="el-icon-office-building"></i>
              项目管理平台
            </el-button>
          </div>

          <!-- 中间地球 -->
          <div class="globe-container">
            <img
              src="@/assets/img/diqiu.png"
              alt="3D Earth"
              class="globe-image"
            />
          </div>

          <!-- 右侧按钮组 -->
          <div class="button-group right-group">
            <el-button type="primary" class="glow-button">
              <i class="el-icon-data-analysis"></i>
              智慧管理平台
            </el-button>
            <el-button type="primary" class="glow-button">
              <i class="el-icon-picture"></i>
              文旅管理平台
            </el-button>
          </div>
        </div>

        <!-- 监管板块 -->
        <div class="supervision-panel">
          <div class="panel-header">
            <div class="title-box">
              <span class="title">监管板块</span>
            </div>
          </div>
          <div class="supervision-content">
            <div class="supervision-header">
              <span>项目名称</span>
              <span>预警类型</span>
              <span>预警等级</span>
            </div>
            <div class="supervision-scroll">
              <div
                class="supervision-list"
                :style="{ transform: `translateY(${scrollPosition}px)` }"
              >
                <div
                  v-for="(item, index) in [
                    ...supervisionData,
                    ...supervisionData,
                  ]"
                  :key="index"
                  class="supervision-item"
                >
                  <span class="name">{{ item.name }}</span>
                  <span class="type" :data-type="item.type">{{
                    item.type
                  }}</span>
                  <span
                    :class="[
                      'status',
                      item.status === '一级预警' ? 'warning' : '',
                    ]"
                  >
                    {{ item.status }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-area">
        <!-- 投资板块 -->
        <div class="panel investment-panel">
          <div class="panel-header">
            <div class="title-box">
              <span class="title">投资板块</span>
            </div>
          </div>
          <div id="investmentChart"></div>
        </div>

        <!-- 公路板块 -->
        <div id="roadPanel" class="panel road-panel">
          <div class="panel-header">
            <div class="title-box">
              <span class="title">公路板块</span>
            </div>
          </div>
          <div class="road-content">
            <div id="roadChart"></div>
          </div>
        </div>

        <!-- 人事板块 -->
        <div class="panel personnel-panel">
          <div class="panel-header">
            <div class="title-box">
              <span class="title">人事板块</span>
            </div>
          </div>
          <div class="panel-content">
            <div class="personnel-stats">
              <div class="stat-box">
                <span class="stat-label">总人数</span>
                <span class="stat-value">{{ personnelData.total }}</span>
              </div>
              <div class="stat-box">
                <span class="stat-label">干部人数</span>
                <span class="stat-value">{{ personnelData.management }}</span>
              </div>
              <div class="stat-box">
                <span class="stat-label">党员人数</span>
                <span class="stat-value">{{ personnelData.regular }}</span>
              </div>
            </div>
            <div id="personnelChart" class="chart-container"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard {
  width: 100vw;
  height: 100vh;
  background: #001529 url('@/assets/img/bc.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  background-image: url('@/assets/img/top.png');
  background-size: cover;
  background-position: center;
}

.center-header {
  position: relative;
}

.title-bg {
  font-size: 24px;
  font-weight: bold;
  padding: 0 40px;
  position: relative;
}

.title-bg::before,
.title-bg::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #409eff);
}

.title-bg::before {
  right: 100%;
  transform: translateY(-50%);
}

.title-bg::after {
  left: 100%;
  transform: translateY(-50%) rotate(180deg);
}

.main-content {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  min-height: 0;
}

.left-area,
.right-area {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.platform-buttons {
  gap: 20px;
}

.globe-container {
  flex: 1;
  margin: 20px auto;
  width: 70%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.globe-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.panel {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-header {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.title-box {
  position: relative;
  padding-left: 20px;
}

.title-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #409eff;
}

.project-panel {
  height: 50%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 21, 41, 0.7);
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  overflow: hidden;
  position: relative;
}

.statistics {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.stat-item {
  text-align: center;
}

.number {
  font-size: 32px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 8px;
}

.label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-header span:nth-child(2),
.table-header span:nth-child(3) {
  text-align: center;
}

.project-scroll {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.project-list {
  position: absolute;
  width: 100%;
  transition: transform 0.5s linear;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-name {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}

.progress-number {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

:deep(.el-scrollbar__wrap) {
  overflow-x: auto;
}

:deep(.el-scrollbar__view) {
  padding-bottom: 20px;
}

.road-panel {
  height: 33%;
  background: rgba(0, 21, 41, 0.7);
  position: relative;
  padding: 20px;
}

.road-content {
  height: calc(100% - 40px);
  position: relative;
}

#roadChart {
  width: 100%;
  height: 100%;
}

.road-legend {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.legend-text {
  min-width: 50px;
}

.legend-value {
  color: rgba(255, 255, 255, 0.85);
}

.supervision-panel {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  background: rgba(0, 21, 41, 0.7);
  border-radius: 8px;
  border: 1px solid rgba(64, 158, 255, 0.3);
  padding: 15px;
  margin-top: 20px;
}

.supervision-content {
  height: 200px;
  overflow: hidden;
}

.supervision-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
}

.supervision-scroll {
  position: relative;
  height: calc(100% - 40px);
  overflow: hidden;
}

.supervision-list {
  position: absolute;
  width: 100%;
  transition: transform 0.5s linear;
}

.supervision-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 12px 20px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.supervision-item .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}

.supervision-item .type,
.supervision-item .status {
  text-align: center;
}

.supervision-item .warning {
  color: #f56c6c;
}

/* 响应��调整 */
@media screen and (max-height: 900px) {
  .supervision-panel {
    bottom: 10px;
  }

  .supervision-content {
    height: 150px;
  }
}

@media screen and (max-width: 1366px) {
  .supervision-panel {
    width: 95%;
  }

  .supervision-item {
    padding: 8px 15px;
    font-size: 13px;
  }
}

/* 确保平台布局和监管板块不重叠 */
.platform-layout {
  height: calc(100% - 250px);
  margin-bottom: 20px;
}

.property-panel {
  height: 50%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 21, 41, 0.7);
}

.trend-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.trend-title {
  color: #409eff;
  font-size: 14px;
  margin: 10px 0;
}

.trend-chart {
  flex: 1;
  width: 100%;
  min-height: 200px;
}

.investment-panel {
  height: 33%;
  background: rgba(0, 21, 41, 0.7);
  display: flex;
  flex-direction: column;
}

#investmentChart {
  flex: 1;
  width: 100%;
  padding: 10px;
}

.personnel-panel {
  height: 33%;
  background: rgba(0, 21, 41, 0.7);
  display: flex;
  flex-direction: column;
}

.personnel-stats {
  display: flex;
  justify-content: space-around;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-box {
  padding: 8px 15px;
  background: rgba(0, 33, 64, 0.5);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.stat-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.stat-value {
  color: #409eff;
  font-size: 20px;
  font-weight: bold;
}

.chart-container {
  flex: 1;
  width: 100%;
}

:deep(.echarts-tooltip) {
  background: rgba(0, 21, 41, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

:deep(.el-scrollbar__wrap) {
  overflow-x: auto;
}

:deep(.el-scrollbar__bar.is-horizontal) {
  display: block;
}

/* 调整标题位置 */
.road-panel .title-box {
  margin-bottom: 15px;
}

.road-panel .title {
  color: #409eff;
  font-size: 16px;
}

/* 更新颜色 */
.road-legend .legend-item:nth-child(1) .legend-color {
  background-color: #ff4d4f !important; /* 红色 - 未受理 */
}

.road-legend .legend-item:nth-child(2) .legend-color {
  background-color: #52c41a !important; /* 绿色 - 已结案 */
}

.road-legend .legend-item:nth-child(3) .legend-color {
  background-color: #1890ff !important; /* 蓝色 - 病害总数 */
}

.road-legend .legend-item:nth-child(4) .legend-color {
  background-color: #faad14 !important; /* 黄色 - 处理中 */
}

.nav-btn {
  padding: 5px 15px;
  background: rgba(5, 43, 81, 0.8); /* 半透明蓝色背景 */
  border: 1px solid #409eff;
  border-radius: 4px;
  color: #409eff;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-btn:hover {
  background: rgba(64, 158, 255, 0.5); /* 悬停背景色加深 */
}

.back-btn {
  margin-right: 20px;
}

.enter-btn {
  margin-left: 20px;
}

.custom-button {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  border: 1px solid rgba(64, 158, 255, 0.3);
  border-radius: 15px;
  padding: 12px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.2);
}

.custom-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.custom-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 144, 255, 0.3);
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
}

.custom-button:hover::before {
  left: 100%;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.button-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    circle at center,
    rgba(24, 144, 255, 0.2),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.custom-button:hover .button-glow {
  opacity: 1;
}

/* 添加图标样式 */
.el-icon-monitor,
.el-icon-office-building,
.el-icon-data-analysis,
.el-icon-picture {
  font-size: 16px;
}

.glow-button {
  background: rgba(32, 99, 155, 0.9);
  border: none;
  border-radius: 30px;
  padding: 12px 30px;
  color: #fff;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px #1d71b8, 0 0 20px #1d71b8,
    inset 0 0 15px rgba(29, 113, 184, 0.5);
  transition: all 0.3s;
}

.glow-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: translateX(-100%);
  transition: 0.5s;
}

.glow-button::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #1d71b8;
  border-radius: 30px;
  opacity: 0;
  transition: 0.3s;
}

.glow-button:hover {
  background: rgba(32, 99, 155, 1);
  box-shadow: 0 0 15px #1d71b8, 0 0 30px #1d71b8, 0 0 45px #1d71b8,
    inset 0 0 20px rgba(29, 113, 184, 0.7);
  transform: translateY(-2px);
}

.glow-button:hover::before {
  transform: translateX(100%);
}

.glow-button:hover::after {
  opacity: 1;
}

.glow-button i {
  margin-right: 8px;
  font-size: 18px;
}

/* 添加响应式布局相关样式 */
.center-area {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px; /* 设置最小高度 */
}

.globe-container {
  position: relative;
  width: 50%;
  max-width: 600px;
  min-width: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.globe-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 添加媒体查询以适应不同屏幕尺寸 */
@media screen and (max-width: 1366px) {
  .glow-button {
    font-size: 14px;
    padding: 10px 20px;
  }

  .globe-container {
    width: 40%;
  }
}

@media screen and (max-width: 1024px) {
  .glow-button {
    font-size: 12px;
    padding: 8px 16px;
  }

  .globe-container {
    width: 35%;
  }
}

/* 确保最小尺寸 */
@media screen and (max-height: 768px) {
  .center-area {
    min-height: 500px;
  }
}

/* 处理超宽屏幕 */
@media screen and (min-width: 1920px) {
  .glow-button {
    font-size: 18px;
    padding: 15px 35px;
  }

  .globe-container {
    width: 60%;
  }
}

/* 响应式调整 */
@media screen and (max-width: 1440px) {
  .left-group {
    left: 15%;
  }
  .right-group {
    right: 15%;
  }
}

@media screen and (max-width: 1024px) {
  .left-group {
    left: 12%;
  }
  .right-group {
    right: 12%;
  }
  .button-group {
    gap: 30px;
  }
}

/* 基础布局 */
.center-area {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.platform-layout {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -100px; /* 整体向上移动 */
}

/* 按钮组基础样式 */
.button-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 2;
}

/* 默认尺寸（1920px）的样式 */
.left-group {
  left: calc(22% - 150px); /* 从-200px改为-150px */
  top: 35%;
  transform: translateY(-50%);
}

.right-group {
  right: calc(22% - 150px); /* 从-200px改为-150px */
  top: 35%;
  transform: translateY(-50%);
}

.globe-container {
  width: 50%;
  max-width: 600px;
  min-width: 300px;
}

.glow-button {
  padding: 15px 35px;
  font-size: 18px;
  width: 200px;
}

/* 大屏幕（2560px及以上）*/
@media screen and (min-width: 2560px) {
  .left-group {
    left: calc(25% - 200px); /* 从-250px改为-200px */
    top: 35%;
  }
  .right-group {
    right: calc(25% - 200px); /* 从-250px改为-200px */
    top: 35%;
  }
}

/* 1440px屏幕 */
@media screen and (max-width: 1440px) {
  .left-group {
    left: calc(18% - 130px); /* 从-180px改为-130px */
    top: 35%;
  }
  .right-group {
    right: calc(18% - 130px); /* 从-180px改为-130px */
    top: 35%;
  }
  .globe-container {
    width: 45%;
  }
  .glow-button {
    padding: 12px 30px;
    font-size: 16px;
    width: 180px;
  }
  .button-group {
    gap: 45px;
  }
}

/* 1366px屏幕 */
@media screen and (max-width: 1366px) {
  .left-group {
    left: calc(15% - 110px); /* 从-160px改为-110px */
    top: 35%;
  }
  .right-group {
    right: calc(15% - 110px); /* 从-160px改为-110px */
    top: 35%;
  }
  .globe-container {
    width: 40%;
  }
  .glow-button {
    padding: 10px 25px;
    font-size: 15px;
    width: 170px;
  }
  .button-group {
    gap: 40px;
  }
}

/* 1024px屏幕 */
@media screen and (max-width: 1024px) {
  .left-group {
    left: calc(12% - 90px); /* 从-140px改为-90px */
    top: 35%;
  }
  .right-group {
    right: calc(12% - 90px); /* 从-140px改为-90px */
    top: 35%;
  }
  .globe-container {
    width: 35%;
  }
  .glow-button {
    padding: 8px 20px;
    font-size: 14px;
    width: 160px;
  }
  .button-group {
    gap: 35px;
  }
}

/* 处理高度较小的屏幕 */
@media screen and (max-height: 900px) {
  .left-group,
  .right-group {
    top: 40%;
  }
  .button-group {
    gap: 40px;
  }
}

@media screen and (max-height: 768px) {
  .left-group,
  .right-group {
    top: 45%;
  }
  .button-group {
    gap: 35px;
  }
}

/* 处理窄屏幕 */
@media screen and (max-aspect-ratio: 4/3) {
  .left-group {
    left: calc(10% - 70px); /* 从-120px改为-70px */
    top: 35%;
  }
  .right-group {
    right: calc(10% - 70px); /* 从-120px改为-70px */
    top: 35%;
  }
  .button-group {
    gap: 30px;
  }
}

/* 确保最小尺寸 */
.glow-button {
  min-width: 150px;
  min-height: 40px;
}

.globe-container {
  min-width: 300px;
  min-height: 300px;
}

/* 添加平滑过渡 */
.button-group,
.globe-container,
.glow-button {
  transition: all 0.3s ease-in-out;
}

/* 监管板块响应式调整 */
@media screen and (max-width: 1440px) {
  .supervision-panel {
    width: 95%;
  }
  .supervision-content {
    height: 180px;
  }
}

@media screen and (max-width: 1024px) {
  .supervision-panel {
    width: 98%;
  }
  .supervision-content {
    height: 150px;
  }
}

@media screen and (max-height: 768px) {
  .supervision-panel {
    bottom: 10px;
  }
  .supervision-content {
    height: 120px;
  }
}
</style>
